<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :fanhui="true">
			<block slot="content">收藏列表</block>
		</cu-custom>
		<scroll-view scroll-y class="swiperStyle" @scrolltolower="buttomSC">
			<view class="cu-list menu-avatar">
		
				<view class="list-box" v-for="(sear,index) in collectionList" :key="index"  :data-ida="sear.id" :data-id="sear.policyDetailsId" :data-date="sear.publishTime" :data-tit="sear.title" @tap="getContent">
					<view class="list-content">
						<view class="list-inner">
							<view class="header">
								<view class="header-title" scroll-y="true">
										{{ sear.title }}
								</view>
								<view class="header-img">
									<view class="img-box">
										<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.gtimg.com%2Fqd_house%2Fpics%2Fhv1%2F72%2F216%2F145%2F9483777.jpg&refer=http%3A%2F%2Fimg1.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611990887&t=df43f7a52fcc771cb9fd66cfff49a226" mode="" class="img"></image>
									</view>
								</view>
							</view>
							<view class="footer">
								<view class="footer-type">类型：{{ sear.type }}</view>
								<view class="footer-time">时间：{{ sear.publishTime }}</view>
							</view>
						</view>
					</view>
				</view>
		
		
			</view>
			<view :class="length>=10?'loadmore':'hiden'">加载更多信息</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				userinfo: {},
				collectionList: [],
				titleId: '',
				status: false,
				count: '',
				pageNo: 1,
				length:null
			}
		},
		created() {
			this.getList()
		},
		methods: {
			// 上拉加载获得新列表
			buttomSC() {
				this.pageNo = this.pageNo + 1
				var data = {
					type: this.scroType,
					pageNo: this.pageNo
				}
				uni.showLoading({
					title: '加载中'
				})

				this.http.getaction('/policy/policy/list', data)
					.then(res => {
						var a = setInterval(() => {
							for (var i = 0; i < res.data.result.records.length; i++) {
								if (i < 9) {
									this.swiperItem[this.TabCur].scrollList.push(res.data.result.records[i])
								}
								if (i >= 9) {
									this.swiperItem[this.TabCur].scrollList.push(res.data.result.records[i])
									clearTimeout(a)
									uni.hideLoading()
								}
							}
						}, 1000)
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 获得收藏列表
			getList() {
				let token = uni.getStorageSync("token")
				let userinfo = uni.getStorageSync("userinfo")
				this.token = token
				this.userinfo = userinfo
				var data = {
					userId: userinfo.id,
					tag: "收藏",
				}
				this.http.getaction('/policy/articleCollectionExe/queryByUserId', data)
					.then(res => {
						// console.log(this.collectionList)
						this.collectionList = res.data.result
						this.length = res.data.result.length
						// var a = JSON.stringify(res.data.result)
						// console.log(res.data.result.length)
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 跳转到内容详情
			getContent(a) {
				var id = a.currentTarget.dataset.id
				this.titleId = a.currentTarget.dataset.tid
				this.article()
				this.collecStu()
				this.lishi()
				// 获得文章收藏量
				var data = {
					articleId: this.titleId
				}
				this.http.getaction('/policy/articleCollectionExe/queryByArticleId', data)
					.then(res => {
						this.count = res.data.result.count
						var data = {
							titleId: this.titleId,
							publishTime: a.currentTarget.dataset.date,
							title: a.currentTarget.dataset.tit,
							count: this.count,
							status: this.status
						}
						this.navigate(id, this.titleId, a.currentTarget.dataset.date, a.currentTarget.dataset.tit, this.count, this.status)
					})
					.catch(err => {
						console.log(err)
					})

			},
			// 跳转
			navigate(id, tid, publishTime, title, count, status) {
				var data = {
					articleId: id
				}
				this.http.getaction('/policy/clickCountExe/getClick', data)
					.then(res => {
						var clickCount = res.data.result.clickCount
						uni.navigateTo({
							url: '../article/article?id=' + id + '&tid=' + tid + '&count=' + count + '&clickCount=' + clickCount +
								'&publishTime=' +
								publishTime + '&title=' + title + '&status=' + status
						})


					})
					.catch(err => {
						console.log(err)
					})
			},

			// 用户对此文章的收藏状态
			collecStu() {
				var data = {
					userId: this.userinfo.id,
					articleId: this.titleId
				}
				this.http.getaction('/policy/articleCollectionExe/getStatus', data)
					.then(res => {
						this.status = res.data.result.status
						console.log(this.status)
					})
					.catch(err => {
						console.log(err)
					})

			},

			// 用户历史记录
			lishi() {
				var data = {
					userId: this.userinfo.id,
					articleId: this.titleId,
					tag: "历史记录"
				}
				this.http.postaction('/policy/articleCollectionExe/addHistory', data)
					.then(res => {

					})
					.catch(err => {
						console.log(err)
					})
			},

			// 文章点击量
			article() {
				var data = {
					articleId: this.titleId
				}
				this.http.putaction('/policy/clickCountExe/edit', data)
					.then(res => {

					})
					.catch(err => {
						console.log(err)
					})
			},

		}
	}
</script>

<style>
	.swiperStyle {
		height: 100%;
	}

	.loadmore {
		text-align: center;
		color: #AAAAAA;
		height: 30upx;
	}

	.loadmore {
		text-align: center;
		color: #AAAAAA;
		padding: 10upx;
	}
	.hiden{
		display: none;
	}
	.list-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.list-content {
		height: 320upx;
		width: 100%;
		background-color: #FFFFFF;
/* 		margin-top: 25upx; */
		margin-bottom: 25upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.list-inner {
		width: 94%;
		height: 280upx;
	}

	.header {
		width: 100%;
		height: 230upx;

		display: flex;
		justify-content: space-between;
	}

	.header-title{
		width: 60%;
		height: 180upx;
/* 		line-height: 40upx; */
		overflow: hidden;
		line-height: 60upx;
		font-size: 38upx;
		font-weight: 600;
	}



	.header-img {
		width: 38%;
		height: 230upx;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.img-box {
		width: 100%;
		height: 210upx;
		background-color: #FFFFFF;
	}

	.img {
		width: 100%;
		height: 100%;
	}

	.footer {
		width: 100%;
		height: 50upx;
		display: flex;
		justify-content: space-between;
	}

	.footer-type {
		color: #8799A3;
	}

	.footer-time {
		color: #8799A3;
	}
</style>
